<template>
  <div class="mine-top fadeIn">
    <img
      class="mine-top-back"
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/user-backdrop.jpg"
      alt=""
    />
    <img
      class="mine-user-avatar"
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/avatarurl.png"
      alt=""
    />
    <div class="mine-user">
      <p class="user-nickname" @click="gotoLogin">用户_2292</p>
      <!-- 点赞+关注+粉丝数 -->
      <div class="global-display">
        <div
          class="user-data global-display global-a-items"
          v-for="(item, index) in userData"
          :key="index"
        >
          <p>{{ item.num }}</p>
          <p>{{ item.title }}</p>
        </div>
      </div>
      <!-- 年龄 -->
      <div class="age-view global-display global-a-items">
        <p>13岁</p>
        <p>北京</p>
      </div>
      <!-- uid -->
      <div v-if="userInfor.uid" class="uid-view global-display global-a-items">
        <p>UID:&nbsp;&nbsp;</p>
        <p>1684545345500</p>
      </div>
      <!-- 导航 -->
      <div class="global-display global-j-content">
        <div
          class="user-navigation global-display global-f-direction global-a-items"
          v-for="(item, index) in userTab"
          :key="index"
          @click="juMp(item.route, index)"
        >
          <img :src="item.icon" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 我的游记 -->
  <div class="position-height"></div>
  <p class="my-travels">我的游记</p>
  <van-list
    v-show="true"
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    offset="100"
    @load="onLoad"
  >
    <card :userTravels="userTravels" />
  </van-list>
  <div style="height: 100px"></div>
  <tabbar />
  <skIndex v-if="skeLeton" />
</template>

<script setup>
import tabbar from "@/components/tabbar/index.vue";
import card from "@/components/cardFlow/index.vue";

import { ref, onMounted, reactive, toRefs, onUnmounted } from "vue";
import Shoucang from "@/icon/mine/shoucang.png";
import Mima from "@/icon/mine/mima.png";
import Ziliao from "@/icon/mine/ziliao.png";
import Chuangzuo from "@/icon/mine/chuangzuo.png";
import skIndex from "@/page/Skeleton-screen/SK-mine.vue";
import emitter from "@/api/event.js";

import { useRouter } from "vue-router";
const $router = useRouter(); // 这是路由跳转的


// 导航路由
function juMp(value, index) {
  if (!loginNot.value) {
    emitter.emit("login-pop-up");
    return false;
  }
  if (index === 0) {
    $router.push({ path: "/query-travel", query: { type: "103" } });
  } else {
    $router.push(value);
  }
}

// 点赞|关注|粉丝数
const userData = ref([
  {
    num: 0,
    title: "获赞",
  },
  {
    num: 0,
    title: "关注",
  },
  {
    num: 0,
    title: "粉丝",
  },
]);
// 我的资料导航
const userTab = ref([
  {
    icon: Shoucang,
    title: "我的收藏",
    route: "/query-travel",
  },
  {
    icon: Ziliao,
    title: "我的资料",
    route: "/personal",
  },
  {
    icon: Mima,
    title: "密码设置",
    route: "/password",
  },
  {
    icon: Chuangzuo,
    title: "创作中心",
    route: "/",
  },
]);
// 存储用户基本信息
const userInfor = reactive({
  avatarUrl: "",
  backdrop: "",
  nickname: "",
  age: "",
  city: "",
  uid: "",
});
// 存储我发布的游记
const userTravels = ref([]);

// 用于判断是否登录
const loginNot = ref(true);
// 骨架屏
const skeLeton = ref(false);
</script>

<style scoped>
.mine-top {
  height: 250px;
  position: relative;
}
.mine-top-back {
  width: 100%;
  object-fit: cover;
  height: 250px;
}
.mine-user {
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  background-color: #fefefe;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 50px 20px 10px 20px;
}
.mine-user-avatar {
  object-fit: cover;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 0;
  z-index: 999;
  display: inline-block;
  box-sizing: border-box;
  box-shadow: 5px 20px 20px rgba(217, 217, 217, 0.9);
}
.user-nickname {
  font-size: 20px;
  font-weight: bold;
}
.user-data {
  padding: 10px 10px 10px 0;
}
.user-data p:nth-child(1) {
  font-weight: bold;
  padding-right: 5px;
}
.user-data p:nth-child(2) {
  color: #8f9092;
  font-size: 14px;
}
.age-view p {
  font-size: 14px;
  background-color: #f3f3f4;
  border-radius: 3px;
  padding: 2px 5px;
  color: #74757b;
  margin: 0 5px 10px 0;
}
.uid-view p {
  color: #8f9092;
  font-size: 14px;
}
.user-navigation {
  text-align: center;
  margin: 10px 0;
}
.user-navigation p {
  color: #8a8b8d;
  font-size: 14px;
}
.user-navigation img {
  width: 25px;
  height: 25px;
  margin-bottom: 8px;
}
.position-height {
  height: 195px;
}
.my-travels {
  font-weight: bold;
  padding: 10px 10px 5px 10px;
}
</style>
